<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #areaDiv{
            width: 500px;
            height: 200px;
            border: 1px black solid;
        }
        #showMsg{
            width: 500px;
            height: 80px;
            border: 1px black solid;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function(){
            //获取两个div
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");

            /*
            onmousemove
                该事件将会在鼠标在元素中移动时被触发
            */
            //事件对象
                //当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
                //在事件对象中，封装着一些细节
            /*
            在IE8及以下浏览器中，是将对象作为window对象的属性保存
            */
            areaDiv.onmousemove = function(event){
                /*
                clientX可以获取水平坐标
                clientY可以获取垂直坐标
                */
                // if(event){
                //     event = window.event;
                // }
                //为了考虑火狐和IE8的兼容性问题
                event = event || window.event;
                var x = event.clientX;
                var y = event.clientY;

                showMsg.innerHTML = "x = "+x+"y = "+y;

            };
        };
    </script>
</head>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>
</html>